<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/main.css">
    <link rel="stylesheet" href="./css/media.css">
    <link rel="icon" href="./img/icons/favicon.png" type="image/x-icon">
    <title>Portfolio</title>
</head>
<body>

    <header class="header">
        <div class="container">

            <div class="header-nav">
                <a href="#!" class="logo">DemetreK</a>
                <nav id="nav" class="nav">
                    <ul class="nav-list">
                        <li class="nav-item"><a href="#!" class="nav-link active">Home</a></li>
                        <li class="nav-item"><a href="#!" class="nav-link">Works</a></li>
                        <li class="nav-item"><a href="#!" class="nav-link">Services</a></li>
                        <li class="nav-item"><a href="#!" class="nav-link">About</a></li>
                        <li class="nav-item"><a href="#!" class="nav-link">Contact</a></li>
                    </ul>

                    <button id="nav-btn" class="nav-button">
                        <img id="nav-btn-img" src="./img/icons/nav-open.svg" alt="Nav button">
                    </button>
                </nav>
            </div>

            <div class="header-row">
                <div class="header-content">
                    <h1 class="header-heading">Demetr Requa<br> <span>Ex-Frontend developer</span></h1>
                    <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt doloremque atque repellendus officia ducimus consequuntur. .</p>
                </div>
                
                <div class="header-img">
                    <picture>
                        <source media="(max-width: 700px)" srcset="./img/header/hero-mobile.png">
                        <img src="./img/header/hero.png" alt="hero">
                    </picture>
                </div>
            </div>

        </div>
    </header>

    <section class="services">
        <div class="container">
            <div class="services-row">
                <div class="service-card">
                    <img class="service-card-img" src="./img/services/01.svg" alt="UI/UX Design">
                    <h3 class="service-card-title">UI/UX Design</h3>
                    <p>Our design is translated into comprehensive digital environments built on latest development standards.</p>
                </div>
                <div class="service-card">
                    <img class="service-card-img" src="./img/services/02.svg" alt="Development">
                    <h3 class="service-card-title">Development</h3>
                    <p>Our design is translated into comprehensive digital environments built on latest development standards.</p>
                </div>
                <div class="service-card">
                    <img class="service-card-img" src="./img/services/03.svg" alt="software testing">
                    <h3 class="service-card-title">software testing</h3>
                    <p>Our design is translated into comprehensive digital environments built on latest development standards.</p>
                </div>
            </div>
        </div>
    </section>

    <section class="works">
        <div class="container">
            <div class="works-title">
                <h2 class="title-1">Projects</h2>
            </div>

            <div class="project">
                <img src="./img/projects/01.jpg" alt="Online fashion store - Homepage" class="project-img">
                <h3 class="project-title"><a class="project-link" href="#!">Online fashion store - Homepage</a></h3>
            </div>

            <div class="project">
                <img src="./img/projects/02.jpg" alt="Reebok Store - Concept" class="project-img">
                <h3 class="project-title"><a class="project-link" href="#!">Reebok Store - Concept</a></h3>
            </div>

            <div class="project">
                <img src="./img/projects/03.jpg" alt="Braun Landing Page - Concept" class="project-img">
                <h3 class="project-title"><a class="project-link" href="#!">Braun Landing Page - Concept</a></h3>
            </div>
        </div>
    </section>

    <footer class="contacts">
        <div class="container">
            <div class="contacts-title">
                <h2 class="title-1">Contacts</h2>
            </div>
            <div class="contacts-content">
                <p>Want to know more or just chat?<br> You are welcome!</p>
            </div>
            <div class="contacts-button">
                <a href="#!" class="btn">Send message</a>
            </div>
            <div class="contacts-socials">
                <a href="#!"><img src="./img/socials/LinkedIn.svg" alt="LinkedIn"></a>
                <a href="#!"><img src="./img/socials/Instargam.svg" alt="Instargam"></a>
                <a href="#!"><img src="./img/socials/Behance.svg" alt="Behance"></a>
                <a href="#!"><img src="./img/socials/Dribble.svg" alt="Dribble"></a>
            </div>
            <div class="contacts-footer">
                <p>Like me on<br> LinkedIn, Instagram, Behance, Dribble</p>
            </div>
        </div>
    </footer>
    <script src="./js/main.js"></script>
</body>
</html>